<template>
  <div>

    <div>
      <!--    标题-->
      <div class="flex align-center justify-center margin-tb">
        <div class="line"></div>
        <div class="title margin-lr-20">导师团队</div>
        <div class="line"></div>
      </div>

      <div class="flex content-wrap">
        <div class="img-area flex">
          <div class="img-item" v-for="item in chatList" :key="item">
            <img :src="item" >
          </div>
        </div>
        <div class="character-area flex justify-end">
          <div style="width: 200px">
            <div><img src="../assets/imgs/dstd_whal.png"></div>
            <div><img src="../assets/imgs/slide1.png" class="whal_ym"></div>
            <div class="pos-re">
              <img src="../assets/imgs/slide2.png" class="whal_ym">

              <div class="weixin-wrap">
                <img src="../assets/imgs/erweima.png" class="ver-middle erweima-img">
                <img src="../assets/imgs/qq.png" class="ver-middle qq-img">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import WzFooter from "@/components/WzFooter";
export default {
  name: "Dstd",
  components: {  },
  data(){
    return {
      chatList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init(){
      this.chatList = [
        require("../assets/imgs/whal_jm.png"),
        require("../assets/imgs/whal_yy.png"),
        require("../assets/imgs/dstd_naccyls.png"),
        require("../assets/imgs/dstd_jyls.png"),
        require("../assets/imgs/dstd_yyls.png"),
        require("../assets/imgs/dstd_ymls.png"),
      ]
    },
  }
};
</script>

<style scoped lang="scss">

.weixin-wrap{
  position: absolute;
  top: 30px;
  left: 40px;

  img:nth-child(1){
    width: 80px;
  }

  img:nth-child(2){
    margin-left: 5px;
    width: 60px;
  }


}




.img-item{
  width: 33.33%;

  img{
    width: 220px;
    height: 330px;
  }
}

.content-wrap{
  padding: 20px 10%;
  width: 80%;

  .img-area{
    flex-wrap: wrap;
    flex: 3;
  }

  .character-area{
    flex: 2;

    .whal_ym{
      width: 200px;
      height: 310px;
    }

  }
}

.title{
  font-size: 28px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #9C5DFB;
}


.line{
  width: 100px;
  height: 2px;
  background-color: #9C5DFB;
}
</style>

